<template>
    <div
        class="logincontainer"
        :style="coverimage">
        <van-form
            @submit="onSubmit"
            @failed="onFailed">
            <van-row justify="space-around">
                <van-col>
                    <div
                        class="logo"
                        :style="{backgroundImage:'url('+logourl+')'}"></div>
                </van-col>
            </van-row>

            <van-row>
                <van-col :span="24">
                    <!-- 账号密码 -->
                    <template v-if="methodType == 0">
                        <van-cell-group inset>
                            <van-field
                                v-model="account"
                                :label="$st('Account')"
                                :placeholder="$st('Please_enter_account')"
                                :rules="[
                                    { required: true, message: $st('Please_enter_account') },
                                ]"
                            />
                            <van-field
                                v-model="password"
                                type="password"
                                :label="$st('password')"
                                :placeholder="$st('please_input_a_password')"
                                :rules="[
                                    { required: true, message: $st('please_input_a_password') },
                                ]"
                            />
                        </van-cell-group>
                    </template>
                    <!-- 手机验证码 -->
                    <template v-else-if="methodType == 1">
                        <van-cell-group inset>
                            <phone-field
                                v-model="phone"
                                :sendCodeMessage="$st('get_verification_code_for_free')"
                                @sendVcode="onSendValidatecode">
                            </phone-field>

                            <van-field
                                v-model="code"
                                type="digit"
                                :label="$st('verification_code')"
                                :placeholder="$st('verification_code')"
                                :rules="[
                                    {
                                        required: true,
                                        message: $st('enter_the_verification_code'),
                                    },
                                ]"
                            />
                        </van-cell-group>
                    </template>
                </van-col>
            </van-row>
            <van-row justify="space-around">
                <van-button
                    class="loginbtn"
                    round
                    size="normal"
                    type="primary"
                    native-type="submit"
                >
                    {{ $st("login") }}
                </van-button>
            </van-row>
            <van-row justify="space-around">
                <van-button
                    class="switchbtn"
                    round
                    size="normal"
                    @click="onSwitchMethod"
                >
                    {{ switchBtnText[methodType] }}
                </van-button>
            </van-row>
        </van-form>

        <div class="bottombtn">
            <div @click="onGotoReg">{{ $st("welcome_to_sign_up") }}</div>
            <div>|</div>
            <div @click="onGotoForgetPwd">{{ $st("forgotpwd") }}</div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import PhoneField from '@/components/_common/PhoneField.vue';
import { useRouter } from 'vue-router';
import { Col, Row } from 'vant';
import { LoginSetup } from '@/setup/login/LoginSetup';
import { selfI18n } from '@/i18n';
import DefaultCoverImage from '@/assets/loginimg@2x.png';
export default {
    components: {
        [Col.name]: Col,
        [Row.name]: Row,
        PhoneField
    },
    setup (props) {
        const store = useStore();
        const $st = selfI18n;
        const router = useRouter();
        const {
            setUserInfo,
            loginstate,
            sendMessage,
            loginByPhone,
            loginByAccount,
            getOpenID,
            getLoignFrom
        } = LoginSetup();
        const state = reactive({
            secondInterval: null,
            isCanSendCode: true,
            second: 60,
            methodType: 0, // /0 账号密码登录 1 手机验证码登录
            switchBtnText: [$st('phone_login'), $st('account_login')],
            account: '',
            password: '',
            phone: '',
            code: ''
        });
        const logourl = computed(() => {
            return store.state.content_config?.logo2?.url;
        });
        const coverimage = computed(() => {
            const coverimg = store.state.content_config?.pccoverimg?.url;

            return coverimg ? { backgroundImage: `url(${coverimg})` } : { backgroundImage: `url(${DefaultCoverImage})` };
        });

        const onSwitchMethod = () => {
            state.phone = '';
            state.code = '';
            state.account = '';
            state.password = '';
            state.methodType = (state.methodType + 1) % 2;
        };

        const onSendValidatecode = () => {
            console.log(state.phone);
            if (state.phone) {
                sendMessage(state.phone);
            }
        };
        const onGotoReg = () => {
            router.push({ path: '/register' });
        };
        const onGotoForgetPwd = () => {
            router.push({ path: '/forgetpwd' });
        };
        const onFailed = (errorInfo) => {
            console.log('failed', errorInfo);
        };

        const onSubmit = () => {
            // 执行登录操作
            switch (state.methodType) {
            case 0: // 用户名密码
                loginByAccount(state.account, state.password);
                break;
            case 1: // 手机验证码
                loginByPhone(state.phone, state.code);
                break;
            }
        };
        onMounted(() => {
            const loginfrom = getLoignFrom();
            if (loginfrom !== 'browser') {
                getOpenID();
            }
        });
        return {
            logourl,
            coverimage,
            onGotoReg,
            onGotoForgetPwd,
            onSwitchMethod,
            onSendValidatecode,
            onFailed,
            onSubmit,
            setUserInfo,
            loginstate,
            ...toRefs(state)
        };
    }
};
</script>

<style lang="scss">
.logincontainer {
  position: relative;
  min-height: 550px;
    /* min-height: 100vh; */
  min-width: 300px;
  width: 100%;
  height: 100%;

  background-size: 100% 100%;
  background-clip: padding-box;
  background-repeat: no-repeat;
//   background-image: url("../../assets/loginimg@2x.png");

  .van-cell-group--inset{
      margin:0px 30px;
  }
  .van-form{
    .van-cell{
        font-size: 17px;
        //min-height: 60px;
    }
    .van-field__label{
        width: 52px;
    }
    .van-button{
        font-size: 17px;
    }
}
}

.logo {
  background-size: 100%;
//  background-image: url("../../assets/loginlogo@2x.png");
  height: 100px;
  width: 100px;
  margin-top: 50px;
  margin-bottom: 30px;
}

.loginbtn {
  margin-top: 30px;
  height: 35px;
  width: 60%;
}

.switchbtn {
  margin-top: 15px;
  height: 35px;
  width: 60%;
}

.codebtn {
  color: #1890ff;
  border: 0 solid white;
}
.bottombtn {
  position: absolute;
  bottom: 30px;
  left: 50%;

  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.5);
  border: 0px solid white;
  text-align: center;

  width: 128px;
  height: 25px;
  border-radius: 35px;

  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 13px;
}
.bottombtn div {
  margin: 3px;
}
.bottombtn div:first-child {
  margin-left: 8px;
}
</style>
